<template>
  <div class="newbook">
    <transition name="van-fade">
      <el-image
        src="http://img63.ddimg.cn/upload_img/00610/core/gotop.png"
        class="icons"
         v-show="visable"
        @click="goTop()"
      ></el-image>
    </transition>
    <nav>新书推荐</nav>
    <div class="news">
      <div class="newcard" v-for="item in newbook" :key="item.item_id">
        <div class="image">
          <el-image :src="item.item_img" lazy></el-image>
          <h4>{{ item.item_title }}</h4>
          <h5>
            <span v-for="val in item.item_labels" :key="val.label_nm">{{
              val.label_nm
            }}</span>
          </h5>
          <h6>
            <label>￥{{ item.price_effect }}</label>
            <label>找相似</label>
          </h6>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "NewBook",
  data() {
    return {
      newbook: [],
      visable: false,
    };
  },
  methods: {
    getScoll() {
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      if (scrollTop >= 350) {
        this.visable = true;
      } else {
        this.visable = false;
      }
    },

    goTop() {
      window.scrollTo(0, 0);
    },
  },
  mounted() {
    window.addEventListener("scroll", this.getScoll);
  },
  created() {
    this.axios
      .get(
        `http://api.dangdang.com/jmapi/cms/getRecoForYou?client_version=1.0&user_client=touch&permanent_id=20220501235652856029683321204085512&udid=ad4d8061ff4884ad9c4523bf4e99a6b3&timestamp=1651503830868&union_id=&unionId=&cv=1.0&ct=touch&ts=1651503830868&time_code=419c75e328bb9de3cd956ea77186fa05&tc=87a86618fae0c78634e6181910686ca5&page_size=100&page_off=1&call_id=1&source=home&list_version=1.2.0&rotation_on=0&domain=app.gateway.mix.api&refer=mix&version=1`
      )
      .then((res) => {
        if (res.status === 200) {
          let book = res.data.data.result_list;
          book.forEach((item) => {
            if (this.newbook.indexOf(item.result_items) == -1) {
              this.newbook.push(item.result_items[0]);
            }
          });
        }
      })
      .catch((error) => {
        console.log(error);
      });
  },
};
</script>

<style scoped>
/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  list-style: none;
}

.newbook nav {
  height: 1rem;
  font-size: 0.4rem;
  line-height: 1rem;
  width: 96%;
  margin: 0 2%;
  background-color: rgb(245, 108, 108);
  color: white;
  font-weight: bold;
  text-align: center;
}

.newbook .news {
  width: 96%;
  height: auto;
  margin: 0 2%;
  margin-top: 0.3rem;
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 1rem;
  background-color: rgb(248, 248, 248);
}

.newbook .newcard {
  width: 48%;
  margin: 0.2rem 0.6%;
  height: 6.8rem;
  border: 1px solid ghostwhite;
  border-radius: 0.2rem;
  background-color: white;
}

.newbook .newcard .image {
  width: 100%;
  height: 4.2rem;
}

.newbook .newcard .image .el-image {
  width: 99%;
  height: 99%;
  margin: 0.5%;
}

.newbook .newcard h4 {
  width: 96%;
  margin: 0.1rem 2%;
  color: black;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-weight: normal;
  font-size: 0.35rem;
}

.newbook .newcard h5 {
  font-weight: normal;
  display: flex;
  width: 96%;
  margin: 0.1rem 2%;
}

.newbook .newcard h5 span {
  border: 1px solid red;
  color: red;
  padding: 0.01rem 0.1rem;
  display: inline-block;
  margin-left: 0.1rem;
}

.newbook .newcard h6 {
  font-weight: normal;
  font-style: initial;
  display: flex;
  width: 96%;
  margin: 0.2rem 2%;
  justify-content: space-between;
}

.newbook .newcard h6 label:first-child {
  font-weight: bold;
  font-size: 0.4rem;
}

.newbook .newcard h6 label:first-child em {
  font-size: 0.2rem;
  font-weight: bold;
  font-style: initial;
}

.newbook .newcard h6 label:last-child {
  color: gray;
  border: 1px solid gainsboro;
  border-radius: 0.4rem;
  padding: 0.05rem 0.1rem;
}

.icons {
  position: fixed;
  top: 15rem;
  z-index: 10;
  left: 8.8rem;
}
.bottom{
    color: red;
    text-align: center;
    height: 0.5rem;
    line-height: 0.5rem;
}
</style>
